<template>
  <div id="app">
    <div id="nav">
      <!-- router-link默认渲染为a标签，可使用tag属性指定渲染的标签-->
      <!-- <router-link to="/" tag="button">Home</router-link>渲染为button-->
      <!-- replace属性，客户端无法使用返回点击   -->
      <!-- 当某个router-link被点击就为active状态，会添加 router-link-exact-active 和 router-link-active，
         如果要自定义active可使用active-class属性指定，如active-class="active"，也可以再router中全局指定，
          无需在每个router-link中使用-->
      <router-link to="/">Home</router-link>
      |
      <router-link to="/about">About</router-link>
      |
      <button @click="aboutPage">About</button>
      |
      <!--  /query/paramString方式    -->
      <!--      <router-link :to="'/query/'+ param">Query</router-link>  |-->
      <!--  /query 查询paramString方式，url中没有paramString    -->
      <router-link :to="{name:'Query', params:{p:param}}">Query</router-link>
      |
      <!--  <button @click="paramString">Query</button>  /-->
      <!--  /query?p=queryString方式    -->
      <button @click="queryString">Query</button>
      |
    </div>
    <!-- 避免每次访问页面都要重新创建组件，可以使用keep-alive保持组件活跃
       exclude 排除某个组件不销毁，当有多个组件时，逗号后不能有空格-->
    <keep-alive exclude="Query">
      <router-view/>
    </keep-alive>

  </div>
</template>

<script>
  export default {
    name: "App",
    data() {
      return {
        param: "paramString",
        q: "queryString"
      }
    },
    methods: {
      aboutPage() {
        this.$router.push("/about")  //通过router路由跳转，replace不可点击返回
      },
      paramString() {
        this.$router.push({
          name: "Query",
          path: "/query/:p",
          params: {
            p: this.param
          }
        })
      },
      queryString() {
        this.$router.push({
          // path: "/query",
          name: "Query",
          query: {
            q: this.q
          }
        })
      }
    },
    /* 这两种方法只有keep-alive才能使用
    activated() {
    },
    deactivated() {
    }
    */
  }
</script>

<style>
  #app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
  }

  #nav {
    padding: 30px;
  }

  #nav a {
    font-weight: bold;
    color: #2c3e50;
  }

  #nav a.router-link-exact-active {
    color: #42b983;
  }
</style>
